cascading style sheets reference

אחוזים

החלק שלנו העוסק באחוזים דן בערכים האחוזיים בפרוטרוט.

החלק שלנו העוסק באחוזים דן בערכים האחוזיים בפרוטרוט. כאשר גובה-השורה מוגדר כערך אחוזי מתרחשת הכפלה זהה. גובה-שורה של 1.2, כמו בדוגמא שלמעלה, מתורגם כ120%

עם גודל פונט של 12pt וגובה שורה של 200%, גובה-השורה המתקבל (הרווח שבין קווי הבסיס) הוא 12x2=24pt.

אורכים

החלק שלנו העוסק בערכים מפרט בקשר לערכיי אורך.

במקום לקבוע כפולה של גודל-הפונט הנוכחי, ערכיי אורך מגדירים ערך עבור גובה-השורה. ערך זה יכול להיות ערך יחסי, כמו em או ex, או ערך מוחלט, כמו מילימטרים או סנטימטרים.

עיינו בחלק העוסק בערכיי אורך עבור יותר פרטים אודות השימוש באורך יחסי ובאורך מוחלט.

נורמל

בנוסף, גובה-השורה יכול להיות מוגדר כנורמלי. זה מבטל את הערכים שעברו בירושה.

ערכים של ברירת מחדל

אם לא מוגדר כל ערך שהוא לגובה-השורה, גובה השורה של אלמנט מסוים יהיה נורמלי.

האם זה עובר בירושה?

גובה-השורה של אלמנט עובר בירושה מן האלמנט המכיל אותו. ואולם, קיימים מספר גורמים מסבכים. המשך הדברים נוגע כבר בממלכת הטריינספוטרים, אז הרגישו חופשי להתעלם ממנו.

אם גובה-השורה מוגדר ככפולה, הרי שאלמנט הילד יורש את הגורם ולא את הערך שבא כתוצאה ממנו. דוגמא שלנו למעלה, ראינו כי גודל-פונט של 10pt, עם גובה-שורה של 1.2 מסתכם במרחק של 12pts בין קו הבסיס של השורות הסמוכות.

אז, אלמנט הילד יירש כפולת גובה-שורה של 1.2, ולא ערך גובה-שורה של 12pts. אזי, אם אלמנט הילד הוא בעל גודל פונט של 8pt, גובה-השורה של אלמנט זה יהיה 1.2x8=9pt, ולא גובה-שורה של 12pt של האלמנט ההורה. מצד שני, אם גובה-שורה של אלמנט מסוים מוגדר כאחוז או כערך אורך, כל אלמנט ילד שהוא יורש את הערך ולא את הכפולה.

רמזים והצעות

כמו עם תכונות אחרות היכולות לקבל ערכים יחסיים וערכים מוחלטים, עיינו בדיון שלנו אודות ערכיי אורך בחלק על ערכים, עבור הצעות לגבי מתי מתאים להשתמש בכל סוג.

סידור-שורה-אנכי

מה הוא עושה?

לעיתים קרובות מופיעים אלמנטים באותה השורה או שהם מסודרים בצורה אופקית לאורך הדף. תכונת סידור-שורה-אנכי מאפשרת שליטה באופן סידור האלמנטים בצורה אנכית, לאורך הדף.

ערכים אפשריים

ניתן להגדיר סידור-שורה-אנכי גם בעזרת אחת מתוך קבוצת מילות מפתח וגם בעזרת ערכים אחוזיים.

מילות מפתח

ניתן להגדיר סידור-אנכי בשימוש של מילת מפתח אחת מתוך קבוצת מילות מפתח. מילות מפתח אלה פועלות בדרך אחת מתוך שתי דרכים מובחנות. קבוצת מילות מפתח אחת פועלת באופן יחסי לאלמנט ההורי, בזמן שהקבוצה השנייה פועלת באופן יחסי לשורה שעליה מופיע האלמנט. במקרים רבים זה אותו הדבר, בהכרח.

ערכיי מילות המפתח המתייחסות לאלמנט ההורה הם:

• baseline
• middle
• sub
• super
• text-top
• text-bottom

baseline מסדר את קו הבסיס של האלמנט בשורה עם קו הבסיס של אלמנט ההורה שלו. אם לאלמנט אין קו בסיס, משתמשים בחלק התחתון (bottom).
middle מסדר את נקודת האמצע האנכית של פריט כלשהו בשורה עם קו הבסיס של אלמנט ההורה יחד עם מחצית גובה-x (x-height) של אלמנט ההורה.
sub כותב את האלמנט מתחת.
super - כותב את האלמנט מעל.
text-top מסדר את החלק העליון של האלמנט בשורה עם חלק הפונט העליון של אלמנט ההורה שלו.
text-bottom - מסדר את החלק התחתון של האלמנט בשורה עם החלק העליון של הפונט של אלמנט ההורה שלו.

ערכיי מילות המפתח היחסיים לשורה שעליה מופיע אלמנט מסוים, הם:

• עליון - top
• תחתון - bottom

top (עליון) - מסדר את החלק העליון של האלמנט בשורה עם החלק העליון של האלמנט הגבוה ביותר על השורה שעליה הוא מופיע.
bottom (תחתון) - מסדר את החלק התחתון של האלמנט בשורה עם קו הבסיס של הפונט על השורה עליה הוא מופיע.

ערכיי אחוז

הגדרה של סידור אנכי כערך אחוזי מביאה למצב די מסובך. קו הבסיס של האלמנט מוגבה מעל קו הבסיס של אלמנט ההורה שלו. בכמה? באחוז של גובה-השורה של האלמנ
לדוגמא,

{vertical-align: 20%}

עם אלמנט בעל גובה-שורה של 10pt, קו הבסיס של האלמנט יוגבה 2 נקודות מעל לקו הבסיס של אלמנט ההורה שלו.

אתם יכולים להנמיך את קו הבסיס של האלמנט מתחת לקו הבסיס של ההורה שלו בעזרת השימוש בערכים אחוזיים שליליים.

ערכים של ברירת מחדל

אם לא נקבע ערך כלשהו של סידור-אנכי-בשורה, הסידור האנכי של האלמנט הינו קו הבסיס.

האם זה עובר בירושה?

סידור-אנכי-בשורה אינו עובר בירושה.

רמזים והצעות

ערכיי אחוז הם דרך טובה לפקח על אופן הסידור של דמויות ואלמנטים אחרים שאינם טקסט בשורה עם הטקסט.

back to top

הפנמת-טקסט

מה היא עושה?

הפנמת-טקסט מאפשרת לכם לשלוט באופן ההפנמה או ההחצנה של השורה הראשונה האלמנט.

ערכים אפשריים

ניתן להגדיר הפנמת-טקסט בעזרת אחוזים או אורך ערכיי. בדקו את החלק שלנו המדבר על ערכים, עבור תיאורים מדויקים של כל אחד מהם.

אתם יכולים לשלוט בהפנמה ע"י נתינת ערכים שליליים להפנמת-טקסט, ואולם, לדפדפנים שונים יש דרכים שונות לטפל בערכים שליליים.

כאשר משתמשים בערך אחוז, ההפנמה או ההחצנה היא אחוז הרוחב של אלמנט ההורה.

ערכים של ברירת מחדל

אם לא הוגדר כל ערך עבור תכונת הפנמת-טקסט, לא תיושם הפנמה או החצנה וכך, בהכרח, נקבעת התכונה ל0-.

האם זה עובר בירושה?

לאלמנט יש את אותה ההפנמה כמו לאלמנט ההורה שלו.

רמזים והצעות

שורה היא אינה אלמנט כשלעצמו; היא יכולה להשתנות כפי שרוחב הדף (החלון) משתנה. תכונת הפנמת-הטקסט משפיעה רק על השורה הראשונה של האלמנט. כדי להפנים פיסקה שלמה, לדוגמא, ניתן:

• למקם אותה בתוך ציטוט גוש (blockquote) (וזה מה שרוב כלי ה-HTML עושים, אך זה בניגוד לחוות הדעת של דפי הסגנון אודות מראה המופרד מתוכן, ולכן יש להימנע מכך).
• להשתמש בתכונת השוליים (margin) בכדי לתת שוליים שמאליים.
• להשתמש בתכונת הריפוד (padding) בכדי לקבל השפעה דומה.
• להשתמש בתכונת שמאל (left) בכדי לקבוע את המיקום השמאלי של הפסקה.

תכונת השוליים היא מומלצת כיוון שלמעשה זוהי מטרת קיומה של תכונה זו.

שימו לב כי לא ניתן לתת לכל האלמנטים את תכונת הפנמת-הטקסט. רק אלמנטים של גוש יכולים לקבל הפנמת טקסט. עבור דיון נוסף בנוגע לגושים וסוגי אלמנטים אחרים, בדקו במושגים המתקדמים של דפי הסגנון.

סידור-טקסט-בשורה

מה זה עושה?

סידור-טקסט-בשורה מאפשר לכם להגדיר כמה גושי התוכן של אלמנט כלשהו אמורים להיות מסודרים. סידור-טקסט-בשורה יכול להיות מיושם על אלמנטים גושיים בלבד. עבור יותר פרטים אודות אלמנטים גושים ,בדקו במושגים המתקדמים של דפי הסגנון.

ערכים אפשריים

סידור-טקסט-בשורה יכול להיות אחד מתוך:

• שמאל (left).
• ימין (right).
• מרכז (center).
• יישור (justify).

הדפדפנים אינם חייבים לתמוך בערך היישור ובדרך כלל הם מתייחסים ליישור כאל שמאל (עבור שפות שהן מימין לשמאל, כמו ערבית, הם יכולים להתייחס ליישור כאל ימין).

ערכים של ברירת מחדל

לא קיים ערך של ברירת מחדל עבור תכונת סידור-הטקסט-בשורה. זהו עניינו של הדפדפן להחליט כיצד טקסט אמור להיות מסודר כאשר לא הוגדר כל סידור בשורה ע"י דף הסגנון.

האם זה עובר בירושה?

אלמנט מסוים יורש את סידור השורה מאלמנט ההורה שלו.

רמזים והצעות

כאשר לאלמנט מוגדר סידור-טקסט-בשורה, אלו הם התכנים של האלמנט המושפעים מן הסידור בשורה. הסידור בשורה הוא יחסי לרוחב האלמנט ולא לכל העמוד.

כיוון

מה הוא עושה?

CSS2 מציג בפנינו את תכונת הכיוון. תכונה זו מגדירה את הכיוון הבסיסי עבור טקסט מסוים. במספר מערכות כתיבה הטקסט זורם מימין לשמאל.

ערכים אפשריים

הכיוון יכול להיות או rtl או ltr.

• rtl - אומר שעל הטקסט לזרום מימין לשמאל.
• ltr - אומר שעל הטקסט לזרום משמאל לימין.

ערכים של ברירת מחדל

אם לא נקבע כל ערך לכיוון, ערך ברירת המחדל הוא ltr.

האם זה עובר בירושה?

האלמנט יורש את הכיוון של אלמנט ההורה שלו.

unicode-bidi

מה זה עושה?

זהו תחום התמחות של CSS2 ואין זה מחייב אותנו להיכנס אליו. אם אתם עובדים עם Unicode, פונטים דו כיווניים (bidirectional), ייתכן ותשימו לב לנושאים המעורבים. בקיצור, תכונה זו מסייעת לשליטה על הכיוון של טקסט Unicode.

ערכים אפשריים

Unicode-bidi יכול לקבל ערך אחד מתוך:

• normal - נורמלי.
• embed - משובץ.
• bidi-override - ביטול bidi.

ערכים של ברירת מחדל

אם לא נקבע כל ערך Unicode-bidi, ערך ברירת המחדל הוא נורמל.

האם זה עובר בירושה?

האלמנט אינו יורש את ה-Unicode-bidi של אלמנט ההורה שלו.